<template>
  <div class="project-list-container">
    <div
      class="project-list-item"
      v-for="item in projectSource"
      :key="item.uuid"
    >
      <div class="name" :title="item.proName" @click="gotoPosition()">
        {{ item.proName }}
      </div>
      <div class="operate" @click="gotoProject(item)">进入项目</div>
    </div>
  </div>
</template>
<script>
import { axios } from "@/utils/request";
export default {
  name: "projectList",
  computed: {
    queryInfo() {
      return this.$parent.conditionQueryInfo;
    },
  },
  watch: {
    queryInfo: {
      handler(val) {
        this.getProjectData();
      },
      deep: true,
    },
  },
  data() {
    return {
      projectSource: [],
    };
  },
  mounted() {
    this.getProjectData();
  },
  methods: {
    //查询项目列表
    getProjectData() {
      return new Promise((resolve, reject) => {
        let {
          provinceCode,
          cityCode,
          areaCode = "",
          status = "",
        } = this.queryInfo;
        axios
          .post(
            `/mdata/sysProject/getProjectByParentCode?parentCode=lianyungang`,
            {
              provinceCode,
              cityCode,
              areaCode,
              status,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.projectSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectSource = [];
            reject();
          });
      });
    },

    //进入项目
    gotoProject(item = {}) {
      localStorage.setItem("CURRENT_PROJECT_DATA", JSON.stringify(item));
      this.$router
        .push({
          path: "/project/baseInfo/index",
          query: {
            type: "login",
          },
        })
        .catch(() => {
          console.log("登录跳转首页出错,这个错误从哪里来的");
        });
    },
    //项目定位
    gotoPosition() {
      this.$emit("changeProPosition");
    },
  },
};
</script>
<style lang="less">
.project-list-container {
  .project-list-item {
    display: flex;
    height: 48px;
    align-items: center;
    color: #eef9ff;
    font-size: 16px;
    box-sizing: border-box;
    border-left: 4px solid transparent;
    padding-left: 8px;
    cursor: pointer;
    .name {
      flex: 1;
      overflow: hidden;
      flex-wrap: nowrap;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .operate {
      flex-shrink: 0;
      color: #00ffff;
      margin-left: 10px;
    }
    &:hover {
      background: linear-gradient(
        to right,
        rgba(184, 243, 255, 0.4),
        rgba(184, 243, 255, 0)
      );
      border-left: 4px solid #00d5ff;
    }
  }
}
</style>
